<template>
	<view class="father">
		<view class="top">
			<view class="">
				<navigator url="/pages/yonghu1/xichedian/xichedian">
					<image class="back" src="/static/images/白色左箭头.png" mode=""></image>
				</navigator>
				<view class="title">
					确认订单
				</view>
			</view>
		</view>
		<view class="body">
			<uni-card class="card">
				<view class="liucheng">
					<view class="yyfw">
						<view class="item">
							预约服务
						</view>
					</view>
					<view class="zfdd">
						<view class="item">
							支付订单
						</view>
					</view>
					<view class="mdfw">
						<view class="item">
							门店服务
						</view>
					</view>
				</view>
				<view class="xinxi">
					<image style="width: 20px; height: 20px;margin-top: 10px;" src="../../../static/images/商家@2x.png"
						mode=""></image>
					<view style="margin-left: 10px;">
						<view style="font-size: 14px; font-weight: bold;">
							伟业汽车美容店（人民路店）
						</view>
						<view style="font-size: 12px; color: #a9a9a9;">
							山阳区人民中路33号
						</view>
					</view>
				</view>
				<view class="xinxi">
					<image style="width: 20px; height: 20px;" src="../../../static/images/我的选中.png" mode=""></image>
					<view style="width: 90%; display: flex; justify-content: space-between;  margin-left: 10px;">
						<view style="font-size: 14px; font-weight: bold;">
							张先生
						</view>
						<view style="font-size: 13px; color: #8E8E8E;">
							15345879121
						</view>
					</view>
				</view>
				<navigator url="/pages/yonghu1/xvanzecheliang/xvanzecheliang" class="xinxi" style="margin-top: 30px;">
					<image style="width: 20px; height: 20px;" src="../../../static/images/车辆-01@2x.png" mode=""></image>
					<view style=" width: 90%; display: flex; justify-content: space-between; margin-left: 10px;">
						<view style="font-size: 14px; font-weight: bold;">
							奔驰FWE4/豫A56487
						</view>
						<view class="">
							<image style="width: 20px; height: 20px;" src="../../../static/images/右箭头.png" mode="">
							</image>
						</view>
					</view>
				</navigator>
				<view class="fwcp">
					<view style=" display: flex; justify-content: space-between;">
						<view style="font-size: 14px; font-weight: bold;">
							服务产品
						</view>
						<view style="font-size: 13px; font-weight: bold;">
							共选择<text style="color:#428DFB ;">1项</text>服务产品
						</view>
					</view>
					<view style="display: flex;margin-top: 10px;">
						<view style=" font-size: 14px; font-weight: bold;">
							精品洗车
						</view>
						<view style="margin-left: 10px; color: red;font-size: 14px; font-weight: bold;">
							￥39.9
						</view>
					</view>
				</view>
				<navigator url="/pages/yonghu1/youhuijvan/youhuijvan" style="margin-top: 20px;display: flex; margin-bottom: 10px;">
					<image style="margin-top: 2px; height: 20px;width: 20px;" src="../../../static/images/优惠券@2x.png"
						mode=""></image>
					<view style="font-size: 14px; font-weight: bold;margin-left: 10px;">
						代金券/优惠券
					</view>
					<view style="margin-left: 115px; color: red;font-size: 14px; font-weight: bold;">
						-10元
					</view>
					<image style="margin-top: 2px; margin-left: 10px; width: 20px; height: 20px;"
						src="../../../static/images/右箭头.png" mode=""></image>
				</navigator>
			</uni-card>
		</view>
		<view class="dibu">
			<view class="left">
				<image style="width: 15px; height: 15px; margin-top: 16px;" src="/static/images/客服@2x.png" mode="">
				</image>
				<view class="kefu" @click="show=true">
					联系客服
				</view>
				<u-popup :show="show" @close="close" @open="open" round="15" mode="bottom">
					<view class="relaDoor">
						<view class="doorItem">18642589456</view>
						<view class="doorItem">复制</view>
						<view class="doorItem" @click="show=false">取消拨号</view>
					</view>
				</u-popup>
			</view>
			<view class="heji">
				合计：￥39.9
			</view>
			<navigator url="/pages/yonghu1/tijiaodingdan/tijiaodingdan" class="xiadan">
				提交订单
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false
			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	.doorItem{
		width: 700rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-weight: bold;
		
	}
	.father {
		display: flex;
		flex-direction: column;
		/* 垂直排列 */
		height: 100vh;
		/* 父容器高度占满视口 */
	}

	.dibu {
		margin-top: auto;
		background-color: white;
		display: flex;
		height: 50px;
	}

	.dibu .left {
		display: flex;
		margin-left: 20px;
	}

	.dibu .heji {
		line-height: 50px;
		color: red;
		margin-left: 80px;
	}

	.dibu .kefu {
		margin-left: 5px;
		margin-top: 10px;
		height: 30px;
		line-height: 30px;
		font-weight: bold;
		font-size: 12px;
	}

	.dibu .xiadan {
		margin-left: 10px;
		margin-top: 10px;
		height: 30px;
		width: 100px;
		line-height: 30px;
		background-color: #0662E6;
		color: white;
		font-size: 13px;
		text-align: center;
		border-radius: 20px;
	}

	.body {
		border-radius: 10px;
		margin-top: -120px;
	}

	.body .fwcp {
		margin-top: 20px;
	}

	.body .xinxi {
		display: flex;
		margin-top: 20px;

	}

	.body .liucheng {
		margin-top: 10px;
		display: flex;
		justify-content: space-around;
		box-sizing: border-box;
		margin-bottom: 10px;
		border-bottom: 1px solid rgba(247, 247, 247, 1);
		padding-bottom: 20px;
	}

	.body .liucheng .item {
		width: 30px;
		height: 30px;
		margin-left: 13px;
		margin-top: 8px;
		font-size: 12px;
		line-height: 16px;
	}

	.body .liucheng .yyfw {
		width: 50px;
		height: 50px;
		color: white;
		background-image: url(../../../static/images/矩形 4@2x.png);
		background-size: cover;
		background-repeat: no-repeat;
	}

	.body .liucheng .zfdd {
		width: 50px;
		height: 50px;
		color: white;
		background-image: url(../../../static/images/矩形 4 拷贝@2x.png);
		background-size: cover;
		background-repeat: no-repeat;
	}

	.body .liucheng .mdfw {
		width: 50px;
		height: 50px;
		color: white;
		background-image: url(../../../static/images/矩形 4 拷贝 2@2x.png);
		background-size: cover;
		background-repeat: no-repeat;
	}

	.top {
		width: 100%;
		padding-bottom: 120px;
		background: url(../../../static/images/组 8.png);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.top .back {
		position: absolute;
		margin-left: 20px;
		margin-top: 30px;
		width: 15px;
		height: 15px;
		z-index: 2;
	}

	.top .title {
		text-align: center;
		font-size: 18px;
		color: #fff;
		line-height: 44px;
		/* 根据实际需要调整 */
		padding-top: 20px;
	}
</style>